<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .table-box{
      width:345px;
    }
    .table-box table{
      border-collapse:collapse;
      table-layout:auto;
    }
    .table-box table td{
      border:1px solid #333;
      padding:10px;
    }
    .father{
      width:150px;
      background-color:#cd0000;
    }
  </style>
</head>
<body>
  
  <div class="table-box">
    <table>
      <tr>
        <td>
          超出容器限制除非有明确的相关设置否则上面3种情况尺寸都不会主动
        </td>
        <td>
            当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；
        </td>
        <td>
            当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；
        </td>
      </tr>
    </table>
  </div>
  <script>
    var arr = [,1,,5,,,,]
    console.log(arr)
    console.log(0 in arr)
    console.log(1 in arr)
    arr.forEach(function(item){
      console.log(this)
    }, arr)
    /**
     * forEach
     * filter
     * map
     * find
     * some
     * every
     */
    let ary = [1,2,3,4,5]
    console.log('-----------reduce-----------')
    let res = ary.reduce((prev, item) => {
      console.log(prev, item)
      return prev + item
    })
    console.log(res)
    /**
     * set 数组去重
     * [...new Set([1,1,NaN, 'a', 'a', null, true, undefined])]
     * 
     */ 
    console.log('--------set类数组 map类对象---------')
    let set = new Set([1, 1, NaN, NaN, 'a', 'a', null, true, undefined])
    console.log([...set])
    // console.log(Object.is(NaN, NaN))
    set.add(2)
    set.delete(1)
    console.log(set.has('a'))
    // clear 清空
    // set.clear()
    console.log(set.size)
    console.log(set)
    // set遍历时候只有value
    // set.forEach((val) => {
    //   console.log(val)
    // })
    console.log(set.keys())
    console.log(set.values());
    console.log(set.entries())
    // for(let key of set.keys()){
    //   console.log(key)
    // };


    // 对象的属性名必须是字符串，如果不是，默认将其转成字符串
    console.log('-------map--------')
    let a = 'B'
    let obj1 = {[a]: a}
    console.log(obj1)
    // key可以是任意数据类型
    let obj = {name: 'zs'}
    let map = new Map([[true, 1], [obj, false], [null, null]])
    map.set('hello', true)
    console.log(map)
    console.log(set)
    console.log(map.get(obj))
    map.forEach((val, key)=>{})
    console.log(map.keys())
    console.log(map.values())
    for(let key of map.keys()){
      console.log(key)
    }
    for(let val of map.values()){
      console.log(val)
    }

    console.log('-------symbol--------')
    /**
     * symbol
     * 新的数据类型，6中基本数据类型
     * 唯一的值
     * 传递参数，表示对当前symbol值的描述，为了可读性
     * 可以转布尔
     * 
     * Object.keys()获取对象所有属性
     * 
     * 
     */ 


    const symbol = Symbol('a')
    const symbol1 = Symbol('b')

    console.log(symbol.toString())
    console.log(typeof symbol)
    console.log(!!symbol)

    for(let a of [1,2,3]){
      console.log(a)
    }
    let o = {
      0: 'A',
      1: 'B',
      2: 'C',
      length: 3
    }
    o.__proto__[Symbol.iterator] = function(){
      let _this = this
      this.index = 0;
      return {
        next(){
          return {
            value: _this[_this.index++],
            done: _this.index > _this.length
          }
        }
      }
    }
    for(let item of o){
      console.log(item)
    }
    console.log([...o])
    ;(function(){
      console.log(arguments)
    })()
    /**
     * 调用Iterator接口的场合
     * 解构赋值
     * 扩展运算符
     * Set Map
     * for...of
     * Array.from() 类数组转数组
     * Promise.all()
     * Promise.race()
     * 
     * 
     */
  </script>
</body>
</html>